<template>
    <div class="cmt-container">
        <h3 class="pl">发表评论</h3>
        <hr>
        <textarea class="cmt-text" maxlength="120" placeholder="请输入要BB的内容（最多吐槽120字）"></textarea>
        <mt-button type="primary" size="large">发表评论</mt-button>
        <div class="cmt-list">
            <div class="cmt-item" v-for="(item,i) in comm" :key="item.add_time">
                <div class="cmt-title">
                 第{{ i+1}}楼&nbsp;&nbsp;用户:{{item.user_name}}&nbsp;&nbsp;发表时间:{{item.add_time | dataformate }}
                </div>
                <div class="cmt-body">
                {{item.content==='undefined'?'用户很懒什么都没留下':item.content}}
                </div>
            </div>
        </div>
        <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
import {Toast} from "mint-ui"
export default{
    data()
    {
        return{
             pageindex:1,
             comm:[]
        }
    },
    created(){
         this.getdiss();
    },
    methods:
    {
        getMore(){
               this.pageindex++;
               this.getdiss();
        },
        getdiss(){
            this.$http.get("api/getcomments/" + this.id +"?pageindex="+this.pageindex).then(result=>{
                if(result.body.status===0)
                {
                    this.comm=this.comm.concat(result.body.message);
                }
                else
                {
                    Toast("读取失败");
                }
            })
        }
    },
    props:['id']
}
    
</script>

<style lang="scss" scoped>
.cmt-container{
    padding: 0;
    .pl{
        font-size: 18px;
        text-align: left;
        padding-left: 3px;
    }
    .cmt-text
    {
        margin: 0px;
    }
.cmt-list{
    .cmt-item{
        .cmt-title
        {
            font-size: 14px;
            text-align: left;
            background: #ccc;
            margin-top: 3px;
            margin-bottom: 3px;
        }
        .cmt-body{
            text-align: left;
            text-indent: 2em;
                margin-top: 3px;
            margin-bottom: 3px;
        }
    }
}
}
</style>

